<template>
  <div>
    <n-carousel :autoplay="true">
      <div class="item-carousel hidden md:block" v-for="(item, index0) in sliders" :key="index0"
        :style="{ backgroundColor: item.bgColor, backgroundImage: 'url(' + item.image + ')' }">
        <div class="width_1200 carousel-type-1" v-if="item.type == 3">
          <img :src="item.txtImg" />
          <div class="btn bg-[#ee7f44] text-center" @click="handleRelease">
            <span>立即试用</span>
            <!-- <img src="https://static.huicanzhan.cn/common/sponsor/left_w.png" alt="" /> -->
          </div>
        </div>
        <!-- 慧注册  10分钟搭建您的专属会展活动数字平台-->
        <div class="width_1200 carousel-type-1" v-if="item.type == 1">
          <!-- <div style="color: #2df9fd"> 数字时代，选择慧注册 </div>
          <div style="font-size: 35px; font-weight: bold; margin-top: 20px">
            10分钟搭建您的专属会展活动<br />数字平台
          </div> -->
          <img src="@/assets/images/banner/hzc_text.png" class="w-[1200px]" />
          <div class="btn mt-[26px] bg-[#ee7f44]" @click="handleRelease">
            <span>立即试用</span>
            <img src="https://static.huicanzhan.cn/common/sponsor/left_w.png" alt="" />
          </div>
        </div>
        <!-- CRM -->
        <div class="width_1200 carousel-type-1" v-if="item.type == 'crm'">
          <div class="text-black font-semibold text-[60px]"> 会展客户关系管理系统（CRM） </div>
          <div class="text-[#ff7827] mt-6 text-[30px] font-semibold"> 管理省心 效率加倍 </div>
          <div class="text-[#2165bb] mt-6 font-medium text-[20px]">
            <span>招展管理 | 销售流程管理 | 动态展位图</span><br />
            <span>合同管理 | 客户信息管理 | 财务管理</span>
          </div>
          <div class="btn" @click="openApplyForm">
            <span class="font-bold">试用申请</span>
            <img src="https://static.huicanzhan.cn/common/sponsor/left_w.png" alt="" />
          </div>
        </div>
        <!-- 营销 -->
        <div class="width_1200 carousel-type-1" v-if="item.type == 'yx'">
          <div class="text-white text-[42px] mb-4">让B2B会展活动实现大规模获客增长</div>
          <div class="text-[#00fcee] mt-6 text-[30px] border-b border-[#00fcef48] inline py-4">
            一站式B2B会展营销增长平台
          </div>
          <div class="text-white mt-6 font-medium text-[20px]">
            <span>全流程运营托管基于目标客户精准营销，减少营销浪费，降低营销成本，提高市场ROI</span>
          </div>
          <div class="btn mt-[108px] bg-[#ee8045]" @click="openApplyForm">
            <span class="font-bold">试用申请</span>
            <img src="https://static.huicanzhan.cn/common/sponsor/left_w.png" alt="" />
          </div>
        </div>
      </div>
    </n-carousel>
    <n-carousel :autoplay="true" :show-dots="false" :interval="8000">
      <div class="md:hidden bg-contain bg-no-repeat w-full h-[266px]" v-for="(item, index0) in sliders" :key="index0">
        <div class="relative">
          <img ref="imgRef" :src="item.image" class="w-full" />
          <div class="absolute top-0 left-0 w-full h-full">
            <div class="flex flex-col justify-items-center p-4">
              <template v-if="item.type == 3">
                <div class="w-32 h-7 mt-[166px] bg-[#ee8045] flex items-center justify-between px-2"
                  @click="handleRelease">
                  <span class="font-bold text-white text-sm">立即试用</span>
                  <img src="https://static.huicanzhan.cn/common/sponsor/left_w.png" alt="" />
                </div>
              </template>
              <!-- 慧注册 -->
              <template v-if="item.type == 1">
                <img src="@/assets/images/banner/h5_hzc_text.png" class="w-56 mt-3" />
                <div class="text-white text-[10px] mt-2">会展活动报名及用户服务的数字化工具</div>
                <!-- <img
                  src="@/assets/images/banner/h5_hzc_btn.jpg"
                  class="w-32 mt-12"
                  alt=""
                  @click="handleRelease"
                /> -->
                <div class="w-32 h-7 mt-[16px] bg-[#ee8045] flex items-center justify-between px-2"
                  @click="handleRelease">
                  <span class="font-bold text-white text-sm">立即试用</span>
                  <img src="https://static.huicanzhan.cn/common/sponsor/left_w.png" alt="" />
                </div>
                <!-- <div class="text-[#2df9fd] mt-10">
                  数字时代，选择<span class="border-b border-[#2df9fd]">慧注册</span>
                </div>
                <div class="text-[16px] font-bold text-white mt-3">
                  10分钟搭建您的专属<br />会展活动<br />数字化平台
                </div> -->
                <!-- <div
                  class="w-32 mt-6 h-7 bg-[#005eff] flex items-center justify-between px-2"
                  @click="handleRelease"
                >
                  <span class="font-bold text-white text-sm">立即试用</span>
                  <img src="https://static.huicanzhan.cn/common/sponsor/left_w.png" alt="" />
                </div> -->
              </template>
              <!-- 营销 -->
              <template class="" v-if="item.type == 'yx'">
                <!-- <div class="text-white text-[20px] mb-4">让B2B会展活动实现大规模获客增长</div>
                <div class="text-[#00fcee] mt-1 text-[16px]">
                  <span class="border-b border-[#00fcef48] pb-2">一站式B2B会展营销增长平台</span>
                </div>
                <div class="text-white mt-6 font-medium text-[14px] w-2/3">
                  <span
                    >全流程运营托管基于目标客户精准营销，减少营销浪费，降低营销成本，提高市场ROI</span
                  >
                </div> -->
                <img src="@/assets/images/banner/h5_yx_text.png" class="w-[340px]" />
                <div class="w-32 h-7 mt-[26px] bg-[#ee8045] flex items-center justify-between px-2"
                  @click="openApplyForm">
                  <span class="font-bold text-white text-sm">试用申请</span>
                  <img src="https://static.huicanzhan.cn/common/sponsor/left_w.png" alt="" />
                </div>
              </template>
              <!-- CRM -->
              <template v-if="item.type == 'crm'">
                <!-- <div class="text-black font-semibold text-[24px] mt-3"
                  >会展客户关系管理（CRM）
                </div>
                <div class="text-[#ff7827] mt-1 text-[22px] font-semibold"> 管理省心 效率加倍 </div>
                <div class="text-[#01377a] mt-1 font-medium text-[12px]">
                  <span>招展管理 | 销售流程管理 | 动态展位图</span><br />
                  <span>合同管理 | 客户信息管理 | 财务管理</span>
                </div> -->
                <img src="@/assets/images/banner/crm_h5_txt.png" class="w-[260px] mt-[24px]" />
                <div class="w-32 h-7 mt-[26px] bg-[#005eff] flex items-center justify-between px-2"
                  @click="openApplyForm">
                  <span class="font-bold text-white text-sm">试用申请</span>
                  <img src="https://static.huicanzhan.cn/common/sponsor/left_w.png" alt="" />
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <template #dots="{ total, currentIndex }">
        <ul class="absolute bottom-7 left-1/2 -translate-x-1/2 flex gap-x-3">
          <li class="w-2 h-2 bg-white rounded-full" :class="{ 'bg-opacity-50': currentIndex !== index }"
            v-for="(item, index) in Array.from({ length: total }).fill(0)" :key="index">
          </li>
        </ul>
      </template>
    </n-carousel>
    <!-- 三个数字 -->
    <div
      class="hidden md:flex items-center md:justify-between max-w-[1200px] md:mx-auto flex-col :md:flex-row gap-y-6 gap-x-24 mt-10 md:-mt-[55px] relative md:flex-row">
      <div class="static flex">
        <img class="icon" src="https://static.huicanzhan.cn/common/sponsor/static1.png" alt="" />
        <div>
          <div class="num">{{ stat['event_number'] }}+</div>
          <div>活动场次</div>
        </div>
      </div>
      <div class="static flex">
        <img class="icon" src="https://static.huicanzhan.cn/common/sponsor/static2.png" alt="" style="width: 64px" />
        <div>
          <div class="num">{{ stat['sponsor_number'] }}+</div>
          <div>活动主办</div>
        </div>
      </div>
      <div class="static flex">
        <img class="icon" src="https://static.huicanzhan.cn/common/sponsor/static3.png" alt="" style="width: 52px" />
        <div>
          <div class="num">{{ stat['signin_number'] }}+</div>
          <div>报名人次</div>
        </div>
      </div>
    </div>
    <!-- 三个数字H5 -->
    <div
      class="md:hidden flex items-center flex-row -mt-4 relative justify-around max-w-[1200px] md:justify-between md:mx-auto md:-mt-[25px] md:flex-row">
      <H5NumCard title="活动场次" src="https://static.huicanzhan.cn/common/sponsor/static1.png"
        :num="stat['event_number']" />

      <H5NumCard title="活动主办" src="https://static.huicanzhan.cn/common/sponsor/static2.png"
        :num="stat['sponsor_number']" />

      <H5NumCard title="报名人次" src="https://static.huicanzhan.cn/common/sponsor/static3.png"
        :num="stat['signin_number']" />
    </div>


    <div class="w-full hidden md:block">
      <img :src="PC1Img" class="w-full hidden md:block" />
      <div class="w-full relative">
        <div class="w-[10vw] absolute right-[14vw] top-[21vw] hover:cursor-pointer"
          @click="goTo('https://work.weixin.qq.com/ca/cawcde2d8db7089350')">
          <img src="@/assets/pages/index/pc2btn.png" class="w-full" />
        </div>
        <img :src="PC2Img" class="w-full hidden md:block" />
      </div>
      <img :src="PC3Img" class="w-full hidden md:block" />
    </div>


    <div class="w-full md:hidden">
      <img :src="H51Img" class="w-full md:hidden" />
      <div class="w-full relative">
        <div class="w-[20vw] absolute right-[15vw] top-[33vw] hover:cursor-pointer"
          @click="goTo('https://work.weixin.qq.com/ca/cawcde2d8db7089350')">
          <img src="@/assets/pages/index/pc2btn.png" class="w-full" />
        </div>
        <img :src="H52Img" class="w-full md:hidden" />
      </div>
      <img :src="H53Img" class="w-full md:hidden" />
    </div>




    <div class="hidden md:block hzhb relative">
      <div class="w-full module-box ">合作伙伴</div>
      <div class="w-full box-border mx-auto px-24 absolute xl:bottom-0 md:bottom-6 left-0 right-0 ">
        <img src="@/assets/pages/index/footerblue.png" class="w-full h-auto" />
      </div>
      <div
        class="w-full flex-wrap reflect grid gap-4  grid-cols-5  items-center justify-items-center px-[222px] py-[52px]  ">
        <div class="partner-item w-[12vw] h-[6vw]" v-for="(item, index2) in partner" :key="index2">
          <img class="partner-logo" :src="item.url + '?x-oss-process=image/resize,m_pad,h_78,w_230'"
            @click="goTo(item.link)" />
        </div>
      </div>
    </div>
    <div class="md:hidden hzhb relative h-[360px]">
      <div class="pb-[20px] pt-[40px] text-[26px] font-bold text-center text-black ">合作伙伴</div>
      <div
        class="w-full flex-wrap reflect-h5 grid gap-y-1  grid-cols-5  items-center justify-items-center  px-[39px] py-[2px]  absolute top-30 left-0 right-0 z-10">
        <div class="bg-white w-[60px] h-[30px] overflow-hidden flex items-center rounded-sm p-1 h5-item-shadow "
          v-for="(item, index2) in partner" :key="index2">
          <img class="partner-logo" :src="item.url + '?x-oss-process=image/resize,m_pad,h_78,w_230'"
            @click="goTo(item.link)" />
        </div>
      </div>
      <div class="w-full box-border mx-auto absolute bottom-16  left-0 right-0  ">
        <img src="@/assets/pages/index/footerblue.png" class="w-full h-auto" />
      </div>
    </div>
    <div class="h-3 w-full md:hidden"></div>
  </div>
  <apply-form ref="applyRef" />
</template>

<script lang="ts" setup>
import PC1Img from '@/assets/pages/index/pc1.jpg'
import PC2Img from '@/assets/pages/index/pc2.jpg'
import PC3Img from '@/assets/pages/index/pc3.jpg'


import H51Img from '@/assets/pages/index/h5/h51.jpg'
import H52Img from '@/assets/pages/index/h5/h52.jpg'
import H53Img from '@/assets/pages/index/h5/h53.jpg'

import { ref, onMounted, computed, watch } from 'vue';
import { NCarousel } from 'naive-ui';
import { useRoute, useRouter } from 'vue-router';
import type { partnerItem, popularItem } from '../type/pages/index';
import { Location, ArrowBack, ArrowForward } from '@vicons/ionicons5';
import { getStat, getPartner, getPopular, getMiniCase } from '@/api/home';
import CrmBanner from '@/assets/images/banner/crm.jpg';
import YxBanner from '@/assets/images/banner/yx.jpg';
import BannerBg from '@/assets/images/banner/banner01_bg.png';
import BannerBg2 from '@/assets/images/banner/banner02_bg.png';
import BannerBg3 from '@/assets/images/banner/banner03_bg.png';
import banner_text_1 from '@/assets/images/banner/banner_text_1.png';
import banner_text_2 from '@/assets/images/banner/banner_text_2.png';
import banner_text_3 from '@/assets/images/banner/banner_text_3.png';
import h5_01 from '@/assets/images/banner/h5-01.png';
import h5_02 from '@/assets/images/banner/h5-02.png';
import h5_03 from '@/assets/images/banner/h5-03.png';

import H5YxBanner from '@/assets/images/banner/h5_yx.jpg';
import H5CrmBanner from '@/assets/images/banner/crm_h5.jpg';
import H5ZuCeBanner from '@/assets/images/banner/zhuce_h5.jpg';
import H5HuiZhuCeBanner from '@/assets/images/banner/h5_hzc_banner.jpg';
import ZhuCeBanner from '@/assets/images/banner/zhuce.jpg';
import applyForm from '@/components/signin/components/applyForm.vue';
import { useDetector } from '@/utils';

import H5NumCard from '@/components/pages/index/H5NumCard.vue';
import useH5Breakpoints from '@/hooks/useH5Breakpoints';
import H5HotCardVue from '@/components/pages/index/H5HotCard.vue';



const applyRef = ref();
const router = useRouter();
const swiperActiveIndex = ref<number>(0);
const imgRef = ref<HTMLImageElement[]>();




const md = useH5Breakpoints();

const defaultCover = 'https://static.huicanzhan.cn/common/official/defaultcover.png';
const h5CrmJpg = computed(() => {

  return md.value ? CrmBanner : H5CrmBanner;
});
const h5YxJpg = computed(() => {
  return md.value ? YxBanner : H5YxBanner;
});
const sliders = ref([
  {
    image: md.value ? BannerBg : h5_01,
    txtImg: banner_text_1,
    bgColor: '#020B68',
    type: 3,
  },
  {
    image: md.value ? BannerBg2 : h5_02,
    txtImg: banner_text_2,
    bgColor: '#020B68',
    type: 3,
  },
  {
    image: md.value ? BannerBg3 : h5_03,
    txtImg: banner_text_3,
    bgColor: '#020B68',
    type: 3,
  },
]);

function handleRelease() {
  window.open(import.meta.env.VITE_GLOB_SPONSOR_URL + '/cdmp/');
}

function openApplyForm() {
  applyRef.value.visible = true;
}
function toSignin(event: any) {
  if (event.lang == 1) {
    router.push({
      name: 'ZcEventSignin',
      params: {
        eventid: event.event_id,
      },
    });
  } else {
    router.push({
      name: 'eventsignin',
      params: {
        eventid: event.event_id,
      },
    });
  }
}

const popular = ref<popularItem[]>([]);
const partner = ref<partnerItem[]>([]);
const caseList = ref<any[]>([]);

const popularList = ref<any[]>([]);
const index = ref(0);

const breakCaseList = computed(() => {
  if (caseList.value.length === 0) return [];
  return spArr(caseList.value, md.value ? 5 : 3);
});


function spArr(arr, num) {
  let newArr: any[] = [];
  for (let i = 0; i < arr.length;) {
    newArr.push(arr.slice(i, (i += num)));
  }
  return newArr;
}

function getCaseList() {
  getMiniCase().then((res) => {
    caseList.value = res.items;
  });
}

function getPopularList() {
  getPopular().then((res) => {
    popular.value = res.items ? res.items : [];
    popularList.value = popular.value.slice(0, 15);
  });
}

function getPartnerList() {
  getPartner().then((res) => {
    // const mokeArr = res.items;
    // let a = [];
    // for (let i = 0; i <script 10; i++) {
    //   a = a.concat(mokeArr);
    // }
    partner.value = res.items ? res.items : [];
  });
}
const stat = ref({});
function getStatic() {
  getStat().then((res) => {

    stat.value = res as any;
  }).catch((err) => {
    console.log(err);
  });
}
function toSearch() {
  router.push('/search');
}

function apply() {
  window.open(import.meta.env.VITE_GLOB_SPONSOR_URL + '/register', 'sponsor_register');
}

const onSwiper = () => { };
const contIndex = ref(0);
watch(
  () => swiperActiveIndex.value,
  () => {
    contIndex.value += 1;
  }
);
const onSlideChange = (e) => {
  swiperActiveIndex.value = e.realIndex;
};

const goTo = async (link) => {
  if (!link) {
    return;
  }
  const detector = await useDetector();
  if (detector.mobile) {
    window.location.href = link;
  } else {
    window.open(link, '_blank');
  }
};

getStatic();
getPopularList();
getPartnerList();
getCaseList();

</script>
<style>
.swiper-slide {
  width: 50%;
  transition: all 0.3s ease-in-out;
}

.swiper-slide-active .bshadow {
  @apply shadow-lg;
}

.swiper-slide-prev,
.swiper-slide-next {
  transform: scale(0.9) !important;
}
</style>
<style lang="less" scoped>
.min-pro-title {
  @apply w-full h-3 bg-no-repeat bg-contain md:hidden mb-6;
  background-image: url('@/assets/images/index/Mini Program Case.png');
}

.hot {
  background-image: url('@/assets/images/index/company activity.png');
}

.recom-box {
  background: linear-gradient(to right, white 0%, white 780px, #f7f7f7 420px, #f7f7f7 100%);
  padding: 70px 0;
  position: relative;
  padding-left: 50px;

  .title {
    width: 402px;
    font-weight: bold;
    font-size: 30px;
    color: #191919;
    height: 84px;
    margin-bottom: 40px;
  }

  .btn {
    width: 210px;
    height: 39px;
    background: linear-gradient(270deg, #3098e7 0%, #175bd3 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    padding: 0 20px;
    font-size: 15px;
    margin-top: 74px;
    cursor: pointer;

    img {
      width: 11px;
      height: 8px;
    }
  }

  .cover {
    width: 650px;
    height: 377px;
    // object-fit: cover;
    position: absolute;
    right: 0;
    bottom: 35px;
  }

  .btn-box {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;

    .btn-item {
      width: 40px;
      height: 40px;
      padding: 15px 14px;
      box-sizing: border-box;
      cursor: pointer;

      &.disable {
        cursor: not-allowed;
        color: red;
      }

      &:first-of-type {
        border: 1px solid #0e57d6;
      }

      &:last-of-type {
        background-color: #0e57d6;
        margin-left: 15px;
      }

      img {
        width: 11px;
        height: 8px;
      }
    }
  }
}

.more {
  cursor: pointer;
  color: #000;
}

.static {
  width: 390px;
  height: 120px;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #383838;
  text-align: center;
  box-sizing: border-box;
  padding-right: 50px;
  padding-left: 50px;
  transform: scale(0.6);

  .icon {
    width: 50px;
    height: 50px;
    // margin-right: 30px;
  }

  .num {
    font-size: 42px;
    color: #0e57d6;
    font-weight: bold;
    width: 220px;
    line-height: 55px;
  }
}

.padding-top {
  padding-top: 70px;
}

.item-carousel {
  background-size: cover;
  height: 540px;
}

.carousel-type-1 {
  position: relative;
  color: #fff;
  //padding-top: 110px;
  font-size: 27px;

  .btn {
    position: absolute;
    left: 95px;
    bottom: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0e57d6;
    font-size: 15px;
    // padding: 0 20px 0 37px;
    width: 251px;
    height: 40px;
    cursor: pointer;
    margin-top: 40px;
  }
}

.carousel-img {
  width: 100%;
  height: 520px;
  // object-fit: cover;
}

.module-box {
  padding: 50px 0 40px 0;
  font-size: 35px;
  color: #191919;
  font-weight: 600;
  text-align: center;
}

.hzhb {
  background: url('@/assets/pages/index/footerbg.jpg') no-repeat center;
  background-size: cover;
  padding-bottom: 100px;

  .hzhb-centent {
    // background-color: #fff;
    padding: 50px 35px;
    flex-wrap: wrap;
  }
}

.recommend-item {
  width: 380px;
  overflow: hidden;
  font-size: 0;
  margin-right: 30px;
  margin-bottom: 30px;
  background-color: #fff;
  cursor: pointer;

  &:nth-child(3n) {
    margin-right: 0;
  }

  .recommend-bottom {
    border-top: none;
    font-size: 14px;
    padding: 20px 25px;
  }

  .recommend-img {
    height: 256px;
    width: 100%;
    // object-fit: cover;
  }

  .date {
    color: #0e57d6;
    margin-bottom: 10px;
    font-size: 12px;
  }

  .title {
    height: 44px;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .address {
    color: #5a5a5a;
    font-size: 12px;
    padding-left: 5px;
  }
}

.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  // width: 260px;
  // height: 130px;
  text-align: center;
  // margin-right: 20px;
  // margin-bottom: 20px;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  background-color: white;
  padding: 10px 20px;
  box-shadow: 4px 4px 4px 0 rgb(165, 165, 168);

  &:nth-child(5n) {
    margin-right: 0;
  }

  .partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
}

.case-item {
  margin: 20px 20px 15px 0;
  width: 210px;
  text-align: center;
  box-sizing: border-box;
  text-align: center;

  .img-box {
    padding: 35px;
    background: #fff;
    border-radius: 50%;
  }
}

.case-img {
  width: 145px;
  height: 146px;
}

.case-title {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #5a5a5a;
  line-height: 23px;
  margin-top: 30px;
}

.custom-arrow {
  display: flex;
  position: absolute;
  bottom: 18px;
  right: 10px;

  .custom-arrow--right {
    margin-left: 10px;
  }
}

.reflect {
  -webkit-box-reflect: below -130px linear-gradient(transparent 78%, rgba(0, 0, 0, 0.5) 100%);
}

.reflect-h5 {
  -webkit-box-reflect: below -2px linear-gradient(transparent 78%, rgba(0, 0, 0, 0.5) 100%);
}

.h5-item-shadow {
  box-shadow: 1px 1px 3px 0 rgb(165, 165, 168);
}
</style>
